<template>
  <div class="teller-anager">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="环境">
          <el-select v-model="tellerQuery.sysno" placeholder="请选择环境">
            <el-option label="开发" value="dev" />
            <el-option label="定版" value="st" />
            <el-option label="预演" value="pro" />
          </el-select>
        </el-form-item>

        <h2><svg :class="svgClass" aria-hidden="true">
            <use :xlink:href="assets/svg/people.svg" />
          </svg>111</h2>
        <el-form-item label="系统号">
          
          <el-input v-model="tellerQuery.env" placeholder="请输入系统号" />
        </el-form-item>

        <el-form-item label="柜员号">
          <el-input v-model="tellerQuery.env" placeholder="请输入柜员号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      row-key="id"
      height="250"
      style="width: 100%"
      lazy
      :load="loadChildren"
      stripe
      border
    >
      <el-table-column prop="date" label="文件名" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button type="text" size="small" @click="handleClick"
            >Detail</el-button
          >
          <el-button type="text" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "TellerManager",
  data() {
    const tableData = [
      {
        id: 1,
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 2,
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
        hasChildren: true,
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 3,
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    return {
      percentage: 50,
      tableData,
      tellerQuery: {
        env: "",
        sysno: "",
      },
    };
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    loadChildren(row, node, callback) {
      console.log("row", row);
      console.log("node", node);
      console.log("callback", callback);
      callback([
        {
          id: 31,
          date: "2016-05-01",
          name: "wangxiaohu",
        },
        {
          id: 32,
          date: "2016-05-01",
          name: "wangxiaohu",
        },
      ]);
    },
  },
  components: {},
};
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>
